<template>
  <div class="fund-supervision">
    <left class="fund-supervision-left" :list="leftList" />
    <full-center class="fund-supervision-center" />
    <right class="fund-supervision-right" :list="rightList" />
  </div>
</template>

<script>
import Left from './components/Left.vue';
import Right from './components/Right.vue';
import FullCenter from './components/FullCenter.vue';
export default {
  name: 'FundSupervision',
  components: {
    Left,
    FullCenter,
    Right
  },
  data() {
    return {
      leftList: [
        {
          title: '信息通达',
          children: [
            {
              title: '项目库',
              num: 124
            },
            {
              title: '金额',
              num: '55,736.28'
            }
          ]
        },
        {
          title: '六大经济活动',
          options: {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'right',
              textStyle: {
                // 图例文字的样式
                color: '#fff',
                fontSize: 12
              }
              // backgroundColor: '#fff'
            },
            series: [
              {
                // name: '访问来源',
                type: 'pie',
                radius: '90%',
                center: ['35%', '50%'],
                data: [
                  { value: 21, name: '预算管理' },
                  { value: 73, name: '收支管理' },
                  { value: 58, name: '采购管理' },
                  { value: 48, name: '合同管理' },
                  { value: 30, name: '建设项目' },
                  { value: 30, name: '资产管理' }
                ],
                label: {
                  show: true,
                  position: 'inner',
                  formatter: function(params) {
                    return params.value;
                  },
                  textStyle: {
                    color: '#fff',
                    fontSize: 14
                  }
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: '#fff'
                  }
                }
              }
            ]
          }
        },
        {
          title: '项目类型',
          options: {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'right',
              textStyle: {
                // 图例文字的样式
                color: '#fff',
                fontSize: 12
              }
            },
            series: [
              {
                // name: '访问来源',
                type: 'pie',
                radius: '90%',
                center: ['35%', '50%'],
                data: [
                  { value: 48, name: '补助类' },
                  { value: 76, name: '项目类' }
                ],
                label: {
                  show: true,
                  position: 'inner',
                  formatter: function(params) {
                    return params.value;
                  },
                  textStyle: {
                    color: '#fff',
                    fontSize: 14
                  }
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: '#fff'
                  }
                }
              }
            ]
          }
        }
      ],
      rightList: [
        {
          title: '公告公示',
          children: [
            {
              title: '实地公示',
              value: 67
            },
            {
              title: '线上公示',
              value: 33
            }
          ]
        },
        {
          title: '抽查巡查',
          children: [
            {
              title: '已完成',
              value: 72
            },
            {
              title: '未完成',
              value: 28
            }
          ]
        },
        {
          title: '任务清单',
          data: {
            header: ['任务名称', '完成情况'],
            data: [
              ['合同提交', '完成'],
              ['发票上传', '完成'],
              ['公开公示', '完成'],
              ['资金拨付', '完成'],
              ['资金下达', '完成'],
              ['抽查巡查', '完成'],
              ['中标通知', '完成'],
              ['补充文件', '完成']
            ],
            align: ['center']
          }
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.fund-supervision{
  // background-color: #0B192E;
  background-image: url('~@/assets/images/fullscreen/kqbg.png');
        background-size: 100% 100%;
  height: 100%;
  width: 100%;
  display: flex;
  .fund-supervision-left{
    width: 20%;
    height: 100%;
  }
  .fund-supervision-center{
    color: aliceblue;
    width: 60%;
  }
  .fund-supervision-right{
    width: 20%;
  }
}
</style>
